<template>
  <div class="app-container" style="background: #F0F2F5;">

    <el-card class="box-card mb20" shadow="never">
      <div class="page-head">
        <div class="head-left">
          <span class="return" v-if="datas.store_id > 0">商户：{{ datas.storeInfo.name }}</span>
          <span v-else>公共模板 </span>
          <el-divider direction="vertical"></el-divider>
          <span>模板名称：{{ datas.template_name }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>模板类型：</span>
          <span>{{ datas.templatType.type_name }}</span>
        </div>
        <div class="head-right">
          <el-button type="primary" size="small" @click="savepage(1)">确定</el-button>
        </div>
      </div>
    </el-card>

    <div class="filter-container">
      <el-row class="row" style="width: 100%;">

        <el-col :md="4" :lg="3" :xl="3" :sm="3" :xs="3" class="show-phone" @blur="handleBlur"><!-- 手机展示页面 -->
          <div id="phone" ref="" class="phone"
            style=" margin-top:20px;margin-bottom: 20px; border-radius: 4px;position: relative;">
            <div class="iphone-border-left"></div>
            <div class="iphone-border-right"></div>
            <div class="iphone-border-top"></div>
            <div class="iphone-border-bottom"></div>
            <div class="iphone-border-bottom-bg"></div>
            <!--这里是页面标题 -->
            <div id="ldy-box"
              :style="'cursor: pointer;background: ' + datas.nav_bg_color + ';color:' + datas.nav_front_color + ';line-height: 50px;text-align: center;position:relative;vertical-align:middle'"
              @click="del($event)">
              <el-image src="/static/images/phone-head.png" style="display: block;" />
              <span style="position: absolute;left: 50px;top: 38px;">{{ datas.title }}</span>
            </div>

            <div ref="draw" class="phone-box"
              :style="'overflow-y:auto;height: 790px;background-color:' + datas.bg_color + ';background-size: 100%;background-repeat: ' + datas.bg_picture_repeat + ';background-image: url(' + datas.bg_picture + ');'">
              <draggable v-model="list" class="wrapper" handle=".can-draggable" chosen-class="chose" animation="500">
                <transition-group>

                  <div v-for="(item, index) in list" :key="index"
                    :class="{ 'active': current_index == index, 'zujian-box': item.position_limit == 0, 'zujian-fixed-bottom': item.position_limit == 1, 'zujian-fixed-right': item.position_limit == 2 }"
                    :style="'background:' + item.bg_color">
                    <!-- 组件-->

                    <!-- 这是组件box左边的-->
                    <div class="zujian-box-left can-draggable" @click="mokuai(item.id, index)" />

                    <!-- 这是组件box右边的-->
                    <div class="zujian-box-right can-draggable" @click="mokuai(item.id, index)" />

                    <!-- 这是组件旁边的模块 添加/复制/删除模块-->
                    <div class="mokuai-right" style="text-center: center;">
                      <div style="text-align: center;">

                        <div
                          style="width: 30px;background:#ffffff;margin: 10px auto;padding: 10px 0;border-radius: 16px;">

                          <el-tooltip class="item" effect="dark" content="上移该模块" placement="right"
                            style="cursor: pointer;margin: 5px 0;">
                            <i v-if="index > 0" class="el-icon-arrow-up" @click="sortmodule(item.id, 1, index)" />
                          </el-tooltip>

                          <el-tooltip class="item" effect="dark" content="下移该模块" placement="right"
                            style="cursor: pointer;margin: 5px 0;">
                            <i v-if="index < list.length - 1" class="el-icon-arrow-down"
                              @click="sortmodule(item.id, 2, index)" />
                          </el-tooltip>

                          <el-tooltip class="item" effect="dark" content="复制模块" placement="right"
                            style="cursor: pointer;margin: 5px 0;">
                            <i class="el-icon-document-copy" @click="copymodule()" />
                          </el-tooltip>

                          <el-tooltip class="item" effect="dark" content="删除模块" placement="right"
                            style="cursor: pointer;margin: 5px 0;">
                            <i class="el-icon-delete" @click="delmodule()" />
                          </el-tooltip>
                        </div>

                      </div>
                    </div>

                    <div :id="item.id" class="zujian-content can-draggable"
                      :class="{ 'active': current_index == index }"
                      :style="'margin-top:' + item.margin_top + 'px;padding-top:' + item.padding_top + 'px;padding-bottom:' + item.padding_bottom + 'px;padding-left:' + item.padding_left_right + 'px;padding-right:' + item.padding_left_right + 'px;'"
                      @click.stop="mokuai(item.id, index)">
                      <!-- 这是文本组件 types==1 -->
                      <div v-if="item.types == 1"
                        :class="{ 'text-oblique': item.text_oblique == 1, 'text-bold': item.text_bold == 1, 'text-underline': item.text_underline_through == 1, 'text-through': item.text_underline_through == 2 }"
                        :style="'word-break: break-all;white-space: pre-line;text-align:' + item.text_align + ';font-size:' + item.text_size + 'px;color:' + item.text_color + ';letter-spacing:' + item.text_letter_spacing + 'px;line-height:' + item.text_line_height">
                        {{ item.text_content }}
                      </div>

                      <!-- 这是公告 types==2 -->
                      <div v-if="item.types == 2" class="notice-box"
                        :style="'background-color:' + item.notice_bg_color">
                        <div :style="'color:' + item.notice_color" class="notice-content">
                          <i v-if="item.notice_show_icon == 'true'" class="el-icon-message-solid" />
                          <i>21</i>
                          {{ item.notice_content ? item.notice_content : '这里是公告' }}
                        </div>
                      </div>

                      <!-- 这是图片组件 types==3 -->
                      <div v-if="item.types == 3" class="image-box" :class="'image_' + item.image_type">
                        <img v-for="(itembanner, indexbanner) in 1"
                          v-if="item.images == undefined || item.images.length <= 0" src="/static/images/ex-picture.png"
                          alt="" class="image-item"
                          :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">

                        <img v-for="(itembanner, indexbanner) in item.images" :src="itembanner.url" alt=""
                          class="image-item"
                          :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                      </div>

                      <!-- 这是广告组件 types==12  单广告-->
                      <div v-if="item.types == 12" class="image-box" :class="'image_' + item.image_type">
                        <img v-for="(itembanner, indexbanner) in 1"
                          v-if="item.images == undefined || item.images.length <= 0" src="/static/moban/adv.png" alt=""
                          class="image-item"
                          :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">

                        <img v-for="(itembanner, indexbanner) in item.images" :src="itembanner.url" alt=""
                          class="image-item"
                          :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                      </div>
                      <!-- 这是广告组件 types==13  2宫格广告-->
                      <div v-if="item.types == 13" class="image-box" :class="'image_' + item.image_type">
                        <div style="display: flex;justify-content: center; width:100%">
                          <img v-for="(itembanner, indexbanner) in 1"
                            v-if="item.images == undefined || item.images.length <= 0" src="/static/moban/adv_1.png"
                            alt="" class="image-item"
                            :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">

                          <img v-for="(itembanner, indexbanner) in item.images" :src="itembanner.url" alt=""
                            class="image-item"
                            :style="'width:50%;padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                        </div>

                      </div>

                      <!-- 这是广告组件 types==14  3宫格广告-->
                      <div v-if="item.types == 14" class="image-box" :class="'image_' + item.image_type">
                        <div style="display: flex;justify-content: center;width:100%">
                          <img v-for="(itembanner, indexbanner) in 1"
                            v-if="item.images == undefined || item.images.length <= 0" src="/static/moban/adv_2.png"
                            alt="" class="image-item"
                            :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">

                          <img v-for="(itembanner, indexbanner) in item.images" :src="itembanner.url" alt=""
                            class="image-item"
                            :style="'width:33.33%;padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                        </div>

                      </div>
                      <!-- 这是广告组件 types==15  2列3宫格广告-->
                      <div v-if="item.types == 15" class="image-box" :class="'image_' + item.image_type">
                        <div style="display: flex;justify-content: center;width:100%">
                          <img v-for="(itembanner, indexbanner) in 1"
                            v-if="item.images == undefined || item.images.length <= 0" src="/static/moban/adv_3.png"
                            alt="" class="image-item"
                            :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                          <div style="display: flex;flex-direction: column; justify-content: center;width:50%">
                            <img v-for="(itembanner, indexbanner) in item.images.slice(0, 1)" :src="itembanner.url"
                              alt="" class="image-item"
                              :style="'width:100%;padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                          </div>
                          <div style="display: flex;flex-direction: column; width:50%">
                            <img v-for="(itembanner, indexbanner) in item.images.slice(1)" :src="itembanner.url" alt=""
                              class="image-item"
                              :style="'width:100%; padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                          </div>
                        </div>

                      </div>

                      <!-- 这是广告组件 types==16  4宫格广告-->
                      <div v-if="item.types == 16" class="image-box" :class="'image_' + item.image_type">
                        <div style="display: flex;justify-content: center;width:100%">
                          <img v-for="(itembanner, indexbanner) in 1"
                            v-if="item.images == undefined || item.images.length <= 0" src="/static/moban/adv_4.png"
                            alt="" class="image-item"
                            :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">

                          <img v-for="(itembanner, indexbanner) in item.images" :src="itembanner.url" alt=""
                            class="image-item"
                            :style="'width:25%;padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                        </div>

                      </div>

                      <!-- 这是广告组件 types==17  3列4宫格广告-->
                      <div v-if="item.types == 17" class="image-box" :class="'image_' + item.image_type">
                        <div style="display: flex;justify-content: center;width:100%">
                          <img v-for="(itembanner, indexbanner) in 1"
                            v-if="item.images == undefined || item.images.length <= 0" src="/static/moban/adv_5.png"
                            alt="" class="image-item"
                            :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                          <div style="width: 45%; display: flex;align-items: center;">
                            <img v-for="(itembanner, indexbanner) in item.images.slice(0, 1)" :src="itembanner.url"
                              alt="" class="image-item"
                              :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                          </div>
                          <div style="width:55%;display:flex;flex-direction: column;">
                            <div style="display: flex;justify-content: center; align-items: center">
                              <img v-for="(itembanner, indexbanner) in item.images.slice(1, 2)" :src="itembanner.url"
                                alt="" class="image-item"
                                :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                            </div>
                            <div style="display: flex;">
                              <img v-for="(itembanner, indexbanner) in item.images.slice(2)" :src="itembanner.url"
                                alt="" class="image-item"
                                :style="'width:50%;padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                            </div>
                          </div>

                        </div>

                      </div>

                      <!-- 这是 types==18  买赠组件-->
                      <div v-if="item.types == 18" class="image-box" :class="'image_' + item.image_type"
                        style="padding: 0px 6px 12px;">
                        <div class="ase-active">
                          <div class="ase-active-header">
                            <div class="ase-active-header-img">
                              <img class="ase-active-header-img-img" src="/static/moban/maizhentext.png">
                            </div>
                            <div class="ase-active-header-line">
                              <img
                                src="">
                            </div>
                            <div class="ase-active-header-text">{{ item.title || '名称' }}</div>
                            <div class="ase-active-header-more">
                              更多 <i class="el-icon-arrow-right"></i>
                            </div>
                          </div>
                          <div class="ase-active-body">
                            <div class="ase-active-body-item">
                              <div class="ase-active-body-item-img">
                                <img v-if="item.buygive_id == 0" src="/static/moban/default-goods.png" alt="">
                                <el-image v-else :src="'/static/moban/shangpin.png'"
                                  :preview-src-list="['/static/moban/shangpin.png']" fit="cover" />
                              </div>
                              <div class="ase-active-body-item-info">
                                <div class="ase-active-body-item-info-title">{{ item.title || '买赠名称' }}</div>
                                <div class="ase-active-body-item-info-desc">
                                  <div class="ase-active-body-item-info-desc-line">
                                    <div class="ase-active-body-item-info-desc-line-percentage" style="width: 20px;">
                                    </div>
                                    <img class="ase-active-body-item-info-desc-line-img"
                                      src=""
                                      style="left: 5px; top: -4px;" draggable="false">
                                  </div>
                                  <div class="ase-active-body-item-info-desc-text">已抢0件</div>
                                </div>
                                <div class="ase-active-body-item-info-button over">
                                  <div class="ase-active-body-item-info-button-price">
                                    <span
                                      style="font-size: 14px; height: 14px; font-weight: 500; color: rgb(240, 15, 8);">￥123.00</span>
                                    <span
                                      style="font-size: 10px; height: 10px; font-weight: 400; text-decoration: line-through; color: rgb(153, 153, 153); margin-left: 3px;">￥123.00</span>
                                  </div>
                                  <div class="ase-active-body-item-info-button-text">买赠</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 这是 types==19  0元购-->
                      <div v-if="item.types == 19" class="image-box" :class="'image_' + item.image_type"
                        style="padding: 0px 6px 12px;">
                        <div class="ase-active">
                          <div class="ase-active-header">
                            <div class="ase-active-header-img">
                              <img class="ase-active-header-img-img" src="/static/moban/lingyuangoutext.png">
                            </div>
                            <div class="ase-active-header-line">
                              <img
                                src="">
                            </div>
                            <div class="ase-active-header-text">{{ item.title || '名称' }}</div>
                            <div class="ase-active-header-more">
                              更多 <i class="el-icon-arrow-right"></i>
                            </div>
                          </div>
                          <div class="ase-active-body">
                            <div class="ase-active-body-item">
                              <div class="ase-active-body-item-img">
                                <img v-if="item.zerobuy_id == 0" src="/static/moban/default-goods.png" alt="">
                                <el-image v-else :src="'/static/moban/shangpin.png'"
                                  :preview-src-list="['/static/moban/shangpin.png']" fit="cover" />
                              </div>
                              <div class="ase-active-body-item-info">
                                <div class="ase-active-body-item-info-title">{{ item.title || '0元购名称' }}</div>
                                <div class="ase-active-body-item-info-desc">
                                  <div class="ase-active-body-item-info-desc-line">
                                    <div class="ase-active-body-item-info-desc-line-percentage" style="width: 20px;">
                                    </div>
                                    <img class="ase-active-body-item-info-desc-line-img"
                                      src=""
                                      style="left: 5px; top: -4px;" draggable="false">
                                  </div>
                                  <div class="ase-active-body-item-info-desc-text">已抢0件</div>
                                </div>
                                <div class="ase-active-body-item-info-button over">
                                  <div class="ase-active-body-item-info-button-price">
                                    <span
                                      style="font-size: 14px; height: 14px; font-weight: 500; color: rgb(240, 15, 8);">￥123.00</span>
                                    <span
                                      style="font-size: 10px; height: 10px; font-weight: 400; text-decoration: line-through; color: rgb(153, 153, 153); margin-left: 3px;">￥123.00</span>
                                  </div>
                                  <div class="ase-active-body-item-info-button-text">0元购</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 这是秒杀组件 types==20  秒杀-->
                      <div v-if="item.types == 20" class="image-box" :class="'image_' + item.image_type"
                        style="padding: 0px 6px 12px;">
                        <div class="ase-active">
                          <div class="ase-active-header">
                            <div class="ase-active-header-img">
                              <img class="ase-active-header-img-img"
                                src="">
                            </div>
                            <div class="ase-active-header-line">
                              <img
                                src="">
                            </div>
                            <div class="ase-active-header-text">{{ item.title || '名称' }}</div>
                            <div class="ase-active-header-more">
                              更多 <i class="el-icon-arrow-right"></i>
                            </div>
                          </div>
                          <div class="ase-active-body">
                            <div class="ase-active-body-item">
                              <div class="ase-active-body-item-img">
                                <img v-if="item.seckill_id == 0" src="/static/moban/default-goods.png" alt="">
                                <el-image v-else :src="'/static/moban/shangpin.png'"
                                  :preview-src-list="['/static/moban/shangpin.png']" fit="cover" />
                              </div>
                              <div class="ase-active-body-item-info">
                                <div class="ase-active-body-item-info-title">{{ item.title || '秒杀名称' }}</div>
                                <div class="ase-active-body-item-info-desc">
                                  <div class="ase-active-body-item-info-desc-line">
                                    <div class="ase-active-body-item-info-desc-line-percentage" style="width: 20px;">
                                    </div>
                                    <img class="ase-active-body-item-info-desc-line-img"
                                      src=""
                                      style="left: 5px; top: -4px;" draggable="false">
                                  </div>
                                  <div class="ase-active-body-item-info-desc-text">已抢0件</div>
                                </div>
                                <div class="ase-active-body-item-info-button over">
                                  <div class="ase-active-body-item-info-button-price">
                                    <span
                                      style="font-size: 14px; height: 14px; font-weight: 500; color: rgb(240, 15, 8);">￥123.00</span>
                                    <span
                                      style="font-size: 10px; height: 10px; font-weight: 400; text-decoration: line-through; color: rgb(153, 153, 153); margin-left: 3px;">￥123.00</span>
                                  </div>
                                  <div class="ase-active-body-item-info-button-text">即将开抢</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!--  types==21  换购-->
                      <div v-if="item.types == 21" class="image-box" :class="'image_' + item.image_type"
                        style="padding: 0px 6px 12px;">
                        <div class="ase-active">
                          <div class="ase-active-header">
                            <div class="ase-active-header-img">
                              <img class="ase-active-header-img-img" src="/static/moban/huangoutext.png">
                            </div>
                            <div class="ase-active-header-line">
                              <img
                                src="">
                            </div>
                            <div class="ase-active-header-text">{{ item.title || '名称' }}</div>
                            <div class="ase-active-header-more">
                              更多 <i class="el-icon-arrow-right"></i>
                            </div>
                          </div>
                          <div class="ase-active-body">
                            <div class="ase-active-body-item">
                              <div class="ase-active-body-item-img">
                                <img v-if="item.tradein_id == 0" src="/static/moban/default-goods.png" alt="">
                                <el-image v-else :src="'/static/moban/shangpin.png'"
                                  :preview-src-list="['/static/moban/shangpin.png']" fit="cover" />
                              </div>
                              <div class="ase-active-body-item-info">
                                <div class="ase-active-body-item-info-title">{{ item.title || '换购名称' }}</div>
                                <div class="ase-active-body-item-info-desc">
                                  <div class="ase-active-body-item-info-desc-line">
                                    <div class="ase-active-body-item-info-desc-line-percentage" style="width: 20px;">
                                    </div>
                                    <img class="ase-active-body-item-info-desc-line-img"
                                      src=""
                                      style="left: 5px; top: -4px;" draggable="false">
                                  </div>
                                  <div class="ase-active-body-item-info-desc-text">已抢0件</div>
                                </div>
                                <div class="ase-active-body-item-info-button over">
                                  <div class="ase-active-body-item-info-button-price">
                                    <span
                                      style="font-size: 14px; height: 14px; font-weight: 500; color: rgb(240, 15, 8);">￥123.00</span>
                                    <span
                                      style="font-size: 10px; height: 10px; font-weight: 400; text-decoration: line-through; color: rgb(153, 153, 153); margin-left: 3px;">￥123.00</span>
                                  </div>
                                  <div class="ase-active-body-item-info-button-text">即刻换购</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>


                      <!-- 这是客服组件 types==22  客服-->
                      <div v-if="item.types == 22" class="image-box" :class="'image_' + item.image_type"
                        style="padding: 0px 6px 12px;">
                        <div style="display: flex;justify-content: center;width:100%">
                          <img v-for="(itembanner, indexbanner) in 1"
                            v-if="item.images == undefined || item.images.length <= 0"
                            src="/static/moban/widget_customer.png" alt="" class="image-item"
                            :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">

                          <img v-for="(itembanner, indexbanner) in item.images" :src="itembanner.url" alt=""
                            class="image-item"
                            :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                        </div>

                      </div>

                      <!-- 这是客服组件 types==23  群聊-->
                      <div v-if="item.types == 23" class="image-box" :class="'image_' + item.image_type"
                        style="padding: 0px 6px 12px;">
                        <div style="display: flex;justify-content: center;width:100%;align-items:center;">
                          <img v-for="(itembanner, indexbanner) in 1"
                            v-if="item.images == undefined || item.images.length <= 0" src="/static/moban/chat.png"
                            alt="" class="image-item"
                            :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">

                          <img v-for="(itembanner, indexbanner) in item.images" :src="itembanner.url" alt=""
                            class="image-item"
                            :style="'padding:' + item.image_padding + 'px;border-radius:' + item.border_radius + item.border_radius_type + ';'">
                        </div>

                      </div>

                      <!-- 视频组件 types==24 -->
                      <div v-if="item.types == 24">
                        <video-player class="video-player vjs-custom-skin" ref="videoPlayer" src="" :playsinline="true"
                          :options="{ fluid: true, loop: JSON.parse(item.video_loop), muted: JSON.parse(item.video_muted), autoplay: JSON.parse(item.video_autoplay), sources: [{ type: '', src: item.video_content }] }"></video-player>
                      </div>

                      <!-- 这是轮播图组件 types==4 -->
                      <a-carousel v-if="item.types == 4" :autoplay="item.banner_autoplay == 1 ? true : false">
                        <el-image
                          v-for="(itembanner, indexbanner) in item.images.length > 0 ? item.images : banner_example"
                          :src="itembanner.url" />
                      </a-carousel>

                      <!-- 导航组件 types==5 -->
                      <div v-if="item.types == 5" class="nav-box" :class="'nav_' + item.nav_num">
                        <div v-for="(item_nav, index_nav) in item.nav_num"
                          v-if="item.images == undefined || item.images.length <= 0" class="nav-item">

                          <div class="nav-img nav-img-empty" :class="'nav-img-' + item.nav_round">
                            <i class="el-icon-picture" />
                          </div>

                          <div class="nav-font-size" :style="'color:' + item.nav_text_color + ';'">
                            导航{{ index_nav + 1 }}
                          </div>
                        </div>

                        <div v-for="(item_nav, index_nav) in item.images" class="nav-item">

                          <img :src="item_nav.url" alt="" class="nav-img" :class="'nav-img-' + item.nav_round">

                          <div class="nav-font-size" :style="'color:' + item.nav_text_color + ';'">
                            {{ item_nav.title }}
                          </div>
                        </div>

                      </div>

                      <!-- 这是搜索框组件 types==6 -->
                      <el-input v-if="item.types == 6" class="search-box"
                        :class="{ 'round': item.search_radius > 0, 'straight': item.search_radius == 0 }"
                        placeholder="搜索商品">
                        <i slot="suffix" class="el-input__icon el-icon-search" />
                      </el-input>

                      <!-- 这是辅助线 types==7 -->
                      <div v-if="item.types == 7" class="line-box"
                        :style="'border-bottom: ' + item.height + 'px ' + item.line_type + ' ' + item.line_color + ';'" />

                      <!-- 这是辅助块 types==8 -->
                      <div v-if="item.types == 8" class="block-box"
                        :style="'height: ' + item.height + 'px;background:' + item.block_bg_color" />

                      <!-- 这是商品 types==9 -->
                      <div v-if="item.types == 9" class="goods-box">

                        <!--瀑布流-->
                        <Waterfall v-if="item.goods_type < 4" ref="pubu" :gutter="10"
                          :list="item.goods_content.length > 0 ? item.goods_content : goods_example"
                          :animation-duration="100" background-color="rgba(224, 19, 19, 0)" :animation-delay="300"
                          :breakpoints="{ 800: { rowPerView: item.goods_type } }">
                          <template #item="{ item: item2, url, index }">
                            <div class="card goods-item">
                              <LazyImg :url="item2.cover" class="goods-cover" />
                              <div class="goods-item-body">
                                <p class="goods-name">{{ item2.name }}</p>

                                <div v-if="item.goods_show_volume == 1" class="volume-box">
                                  已售{{ item2.volume }}
                                </div>

                                <div class="price-buy-box" :style="'color:' + item.goods_price_color">
                                  <div class="price-box">
                                    <span class="cny">￥</span>
                                    <span class="price">{{ item2.price }}</span>
                                  </div>

                                  <div class="buy-box" />
                                </div>
                              </div>

                            </div>
                          </template>
                        </Waterfall>

                        <!--一行一个（左右）-->
                        <div
                          v-for="(item_goods, index_goods) in item.goods_content.length > 0 ? item.goods_content : goods_example"
                          v-if="item.goods_type == 4" class="goods-signle">
                          <div class="goods-cover">
                            <el-image :src="item_goods.cover" class="goods-cover" />
                          </div>
                          <div class="goods-card">
                            <div class="goods-name">{{ item_goods.name }}</div>

                            <div v-if="item.goods_show_volume == 1" class="volume-box">
                              已售{{ item_goods.volume }}
                            </div>

                            <div class="price-buy-box" :style="'color:' + item.goods_price_color">
                              <div class="price-box">
                                <span class="cny">￥</span>
                                <span class="price">{{ item_goods.price }}</span>
                              </div>
                              <div class="buy-box" />
                            </div>
                          </div>
                        </div>

                      </div>

                      <!--上直搜 types==10-->
                      <div v-if="item.types == 10" class="sou-box">
                        <img :src="item.sou_image ? item.sou_image : &quot;/static/images/sou.png&quot;">
                      </div>

                      <!--生活号 types==11-->
                      <div v-if="item.types == 11" class="life-box">
                        <img src="/static/images/life.png">
                      </div>

                    </div>

                  </div>

                </transition-group>
              </draggable>

            </div>

          </div>

        </el-col>


        <div style="padding: 40px 40px;max-height:80vh;overflow-x: none;overflow-y: auto;">
          <h1 style="font-weight:normal;color: #666;">装修组件</h1>
          <el-row :gutter="20">
            <el-col :span="7" :offset="0" v-for="(it, id) in libraryData" :key="id" style="margin-top: 20px;">
              <div class="assembhover">
                <div class="mask"></div>
                <el-card class="box-card " :body-style="{ 'height': '200px' }">
                  <div slot="header">
                    <div style="font-weight:700;font-size:14px"> <i :class="[it.icon]"></i> {{ it.name }}</div>
                  </div>
                  <div style="width:100%;height: 100%;">
                    <div style="display: flex;justify-content: center; align-items: center;height: 100%;">
                      <el-image :src="`/static/moban/${it.svg}.png`" fit="scale-down" style="height: 100%;"></el-image>
                    </div>
                    <div>
                    </div>
                    <el-button class="assembhover-button" @click="addassembly(it.value)">添加</el-button>
                  </div>
                </el-card>
              </div>

            </el-col>

          </el-row>
        </div>

        <el-drawer title="" :visible.sync="assembVisible" size="30%" :modal="true" :show-close="false">
          <el-col id="set-box" class="set-box" style="z-index: 99;"><!-- 手机选项的展示页面 -->

            <!-- 页面设置-->
            <div v-if="ldy == 1">
              <el-divider content-position="left">
                <div>页面设置</div>
              </el-divider>

              <el-form ref="page_form" :model="form" label-width="80px">
                <el-tabs v-model="page_set">
                  <el-tab-pane label="基本设置" name="page_basic">
                    <el-form-item label="页面标题">
                      <el-input v-model="datas.title" type="text" placeholder="展示给用户的标题" maxlength="20"
                        show-word-limit />
                    </el-form-item>

                    <el-form-item label="内部名称">
                      <el-input v-model="datas.name" type="text" placeholder="用于后台管理" maxlength="30" show-word-limit />
                    </el-form-item>

                    <el-form-item label="背景颜色">
                      <el-color-picker v-model="datas.bg_color" :show-alpha="false" :predefine="predefineColors"
                        @active-change="(val) => { datas.bg_color = val }" />
                    </el-form-item>

                    <el-form-item label="背景图片">
                      <el-link type="primary" :underline="false" @click="gotoimages('ldy', { num: 1 })">
                        选择图片
                      </el-link>
                      <div class="upload-picture-box">
                        <div v-if="datas.bg_picture" class="picture-item">
                          <div class="picture-item-box">
                            <el-image :src="datas.bg_picture" fit="scale-down" :preview-src-list="[datas.bg_picture]" />

                            <el-button class="del-picture" size="mini" type="danger" icon="el-icon-delete" circle
                              @click="delcontent('ldy', 'ldy_bg_picture')" />
                          </div>
                        </div>
                      </div>
                    </el-form-item>

                    <el-form-item v-if="datas.bg_picture" label="背景图片平铺">
                      <el-radio-group v-model="datas.bg_picture_repeat" size="mini">
                        <el-radio-button label="repeat">平铺</el-radio-button>
                        <el-radio-button label="no-repeat">不平铺</el-radio-button>
                      </el-radio-group>
                    </el-form-item>

                  </el-tab-pane>
                  <el-tab-pane label="导航设置" name="page_nav">
                    <el-form-item label="导航颜色">
                      <el-color-picker v-model="datas.nav_bg_color" :show-alpha="false" :predefine="predefineColors"
                        @active-change="(val) => { datas.nav_bg_color = val }" />
                    </el-form-item>

                    <el-form-item label="字体颜色">
                      <el-color-picker v-model="datas.nav_front_color" :show-alpha="false" :predefine="predefineColors"
                        @active-change="(val) => { datas.nav_front_color = val }" />
                    </el-form-item>

                  </el-tab-pane>
                </el-tabs>
              </el-form>

            </div>
            <!-- 心脏位置 -->
            <el-form ref="ruleForm" label-width="100px" label-position="left">

              <div v-for="(item, index) in list" :index="index">

                <div v-if="index == current_index">

                  <el-divider content-position="left">
                    <div v-if="item.types == 1">文本</div>
                    <div v-if="item.types == 2">公告</div>
                    <div v-if="item.types == 3">图片</div>
                    <div v-if="item.types == 4">轮播图</div>
                    <div v-if="item.types == 5">导航组</div>
                    <div v-if="item.types == 6">搜索框</div>
                    <div v-if="item.types == 7">辅助线</div>
                    <div v-if="item.types == 8">辅助块</div>
                    <div v-if="item.types == 9">商品</div>
                    <div v-if="item.types == 10">上支搜</div>
                    <div v-if="item.types == 11">生活号</div>
                    <div v-if="item.types == 12">广告组件banner</div>
                    <div v-if="item.types == 13">广告组件2宫格banner</div>
                    <div v-if="item.types == 14">广告组件3宫格banner</div>
                    <div v-if="item.types == 15">广告组件2列3宫格banner</div>
                    <div v-if="item.types == 16">广告组件4宫格banner</div>
                    <div v-if="item.types == 17">广告组件3列4宫格banner</div>
                    <div v-if="item.types == 18">买赠组件</div>
                    <div v-if="item.types == 19">0元购组件</div>
                    <div v-if="item.types == 20">秒杀组件</div>
                    <div v-if="item.types == 21">换购组件</div>
                    <div v-if="item.types == 22">客服组件</div>
                    <div v-if="item.types == 23">群聊</div>
                    <div v-if="item.types == 24">视频</div>
                  </el-divider>

                  <el-tabs v-model="zujianTabs">
                    <el-tab-pane label="内容设置" name="first">
                      <el-card class="box-card">
                        <el-form-item label="名称" prop="title">
                          <el-input v-model="item.title" placeholder="名称，用于后台区分" />
                        </el-form-item>

                        <!--文本-->
                        <div v-if="item.types == 1">
                          <el-form-item label="内容" prop="text_content">
                            <el-input v-model="item.text_content" type="textarea" :autosize="true"
                              placeholder="请输入内容" />
                          </el-form-item>
                        </div>

                        <!-- 秒杀组件选择秒杀活动 -->
                        <div v-if="item.types == 20">
                          <el-form-item label="秒杀活动" prop="seckill_id">
                            <el-select v-model="item.seckill_id" placeholder="秒杀活动" clearable filterable>
                              <el-option label="请选择秒杀活动" :value="0"></el-option>
                              <el-option v-for="it in seckillActiveList" :label="it.name" :value="it.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </div>
                        <!-- 换购组件 -->
                        <div v-if="item.types == 21">
                          <el-form-item label="换购活动" prop="tradein_id">
                            <el-select v-model="item.tradein_id" placeholder="秒杀活动" clearable filterable>
                              <el-option label="请选择换购活动" :value="0"></el-option>
                              <el-option v-for="it in tradeinList" :label="it.name" :value="it.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </div>

                        <!-- 0元购组件-->
                        <div v-if="item.types == 19">
                          <el-form-item label="0元购活动" prop="zerobuy_id">
                            <el-select v-model="item.zerobuy_id" placeholder="0元购活动" clearable filterable>
                              <el-option label="请选择0元购活动" :value="0"></el-option>
                              <el-option v-for="it in zerobuyList" :label="it.name" :value="it.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </div>
                        <!-- 买赠组件-->
                        <div v-if="item.types == 18">
                          <el-form-item label="买赠活动" prop="buygive_id">
                            <el-select v-model="item.buygive_id" placeholder="买赠活动" clearable filterable>
                              <el-option label="请选择买赠活动" :value="0"></el-option>
                              <el-option v-for="it in buygiveList" :label="it.name" :value="it.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </div>

                        <!-- 群聊id -->
                        <div v-if="item.types == 23">
                          <el-form-item label="群聊ID" prop="groupchat_id">
                            <el-input v-model="item.groupchat_id" clearable>
                            </el-input>
                          </el-form-item>
                        </div>

                        <!-- 视频 -->
                        <div v-if="item.types == 24">
                          <el-card class="box-card">
                            <el-button size="mini" @click="drawervideosource(1)" type="primary" style="margin: 20px 0;">
                              <i class="el-icon-upload"></i>
                              上传或选择视频
                            </el-button>

                            <div v-if="item.video_content">
                              <video-player class="video-player vjs-custom-skin" ref="videoPlayer" src=""
                                :playsinline="true"
                                :options="{ fluid: true, sources: [{ type: '', src: item.video_content }] }"></video-player>
                            </div>

                            <div style="margin: 10px 0;">

                            </div>

                          </el-card>
                          <div style="margin-top: 10px;">
                            <el-radio-group v-model="item.video_is_screen_height">
                              <el-radio-button :label="0">组件高度</el-radio-button>
                              <el-radio-button :label="1">自适应屏幕高度</el-radio-button>
                            </el-radio-group>
                          </div>
                          <el-alert v-if="item.video_is_screen_height == 1" type="error"
                            title="选择自适应屏幕高度，此视频的高度默认为你手机屏幕的高度！并且视频一定要在模块的最顶部，请慎重使用此功能！并且建议模块背景颜色设置为黑色！">
                          </el-alert>
                          <div style="margin-top: 10px;">
                            <el-radio-group v-model="item.video_autoplay">
                              <el-radio-button label="true">自动播放</el-radio-button>
                              <el-radio-button label="false">关闭自动播放</el-radio-button>
                            </el-radio-group>
                          </div>

                          <div style="margin-top: 10px;">
                            <el-radio-group v-model="item.video_muted">
                              <el-radio-button label="true">静音播放</el-radio-button>
                              <el-radio-button label="false">正常播放</el-radio-button>
                            </el-radio-group>
                          </div>

                          <div style="margin-top: 10px;">
                            <el-radio-group v-model="item.video_loop">
                              <el-radio-button label="true">循环播放</el-radio-button>
                              <el-radio-button label="false">不循环播放</el-radio-button>
                            </el-radio-group>
                          </div>
                        </div>

                        <!--公告-->
                        <div v-if="item.types == 2">
                          <el-form-item label="公告内容" prop="notice_content">
                            <el-input v-model="item.notice_content" type="textarea" :autosize="true"
                              placeholder="请输入公告内容" />
                          </el-form-item>

                          <el-form-item label="是否滚动" prop="notice_scrollable">
                            <el-radio-group v-model="item.notice_scrollable" size="mini">
                              <el-radio-button label="true">滚动</el-radio-button>
                              <el-radio-button label="false">不滚动</el-radio-button>
                            </el-radio-group>
                          </el-form-item>

                          <el-form-item label="显示图标" prop="notice_show_icon">
                            <el-radio-group v-model="item.notice_show_icon" size="mini">
                              <el-radio-button label="true">显示</el-radio-button>
                              <el-radio-button label="false">不显示</el-radio-button>
                            </el-radio-group>
                          </el-form-item>
                        </div>

                        <div v-if="item.types == 1 || item.types == 2">
                          <el-form-item label="跳转链接" prop="item.jump_content.jump_type">
                            <el-select v-model="item.jump_content.jump_type" placeholder="请选择跳转">
                              <el-option v-for="itemop in jump_options" :key="itemop.value" :label="itemop.name"
                                :value="itemop.value" />
                            </el-select>
                          </el-form-item>

                          <el-form-item v-if="item.jump_content.jump_type == 1" label="小程序页面">
                            <el-select v-model="item.jump_content.key_id" placeholder="请选择小程序页面">
                              <el-option v-for="itemop in jump_options['1']['pages']" :key="itemop.value"
                                :label="itemop.name" :value="itemop.value" />
                            </el-select>
                          </el-form-item>

                          <el-form-item v-if="item.jump_content.jump_type == 2" label="店铺页面">
                            <el-select v-model="item.jump_content.key_id" filterable placeholder="请选择" clearable
                              @change="pagelist()">
                              <el-option v-for="item in pageData" :key="item.id" :label="item.id + '/' + item.name"
                                :value="item.page_secret" />
                            </el-select>
                          </el-form-item>

                          <el-form-item v-if="item.jump_content.jump_type == 3" label="商品分类">
                            <el-cascader ref="goodscategory" v-model="item.jump_content.key_id"
                              :options="goodscategorydata" :show-all-levels="false"
                              :props="{ checkStrictly: true, children: 'sons', label: 'name', id: 'id' }" clearable />
                          </el-form-item>

                          <el-form-item v-if="item.jump_content.jump_type == 4" label="选择商品">
                            <span class="chose-goods" @click="gotogoods(item.types, { 'chosed_goods': [], 'num': 1 })">
                              选择商品
                            </span>
                            <div v-if="item.jump_content.key_id > 0" class="wrapper upload-picture-box">
                              <div class="picture-item">
                                <el-tooltip placement="bottom" effect="light">
                                  <div slot="content">
                                    id: {{ item.jump_content.content.id }}<br><br>
                                    名称：{{ item.jump_content.content.name }}<br><br>
                                    价格：{{ item.jump_content.content.price }}<br><br>
                                    库存：{{ item.jump_content.content.stocks }}<br><br>
                                    客户端展示：
                                    <el-tag v-if="item.jump_content.content.client_show == 1" type="success"
                                      effect="dark" size="mini">
                                      显示
                                    </el-tag>
                                    <el-tag v-if="item.jump_content.content.client_show == 0" type="info" effect="dark">
                                      隐藏
                                    </el-tag>
                                    <br><br>
                                    状态：
                                    <el-tag v-if="item.jump_content.content.status == 1" type="success" effect="dark"
                                      size="mini">
                                      上架中
                                    </el-tag>
                                    <el-tag v-if="item.jump_content.content.status == 0" type="info" effect="dark">
                                      已下架
                                    </el-tag>
                                  </div>
                                  <div class="picture-item-box">
                                    <el-image :src="item.jump_content.content.cover" fit="scale-down" />
                                  </div>
                                </el-tooltip>
                              </div>
                            </div>

                          </el-form-item>

                          <el-form-item v-if="item.jump_content.jump_type == 5 || item.jump_content.jump_type == 7"
                            label="跳转链接">
                            <el-input v-model="item.jump_content.link_url" placeholder="请输入链接" />
                          </el-form-item>

                          <el-form-item v-if="item.jump_content.jump_type == 6" label="小程序appid">
                            <el-input v-model="item.jump_content.app_appid" placeholder="请输入小程序appid" />
                          </el-form-item>

                          <el-form-item v-if="item.jump_content.jump_type == 6" label="小程序页面地址">
                            <el-input v-model="item.jump_content.app_page" placeholder="请输入小程序页面地址" />
                          </el-form-item>

                        </div>

                        <!--图片-->
                        <div v-if="item.types == 3">
                          <el-form-item label="图片模式" prop="image_type">
                            <el-radio-group v-model="item.image_type" size="mini">
                              <el-radio-button :label="1">1行1图</el-radio-button>
                              <el-radio-button :label="2">1行2图</el-radio-button>
                              <el-radio-button :label="3">1行3图</el-radio-button>
                              <!--<el-radio-button :label="4">1行多图滚动</el-radio-button>-->
                            </el-radio-group>
                          </el-form-item>
                        </div>

                        <!--轮播图-->
                        <div v-if="item.types == 4">
                          <el-form-item label="自动切换" prop="banner_autoplay">
                            <el-radio-group v-model="item.banner_autoplay" size="mini">
                              <el-radio-button :label="1">自动切换</el-radio-button>
                              <el-radio-button :label="2">关闭自动切换</el-radio-button>
                            </el-radio-group>
                          </el-form-item>

                          <el-form-item v-if="item.banner_autoplay == 1" label="切换时间" prop="banner_interval">
                            <el-slider v-model="item.banner_interval" :min="1000" :max="10000" :step="1000"
                              input-size="mini" show-input />
                          </el-form-item>

                          <el-form-item label="指示点" prop="banner_dot">
                            <el-radio-group v-model="item.banner_dot" size="mini">
                              <el-radio-button label="default">默认</el-radio-button>
                              <el-radio-button label="dot">圆点</el-radio-button>
                              <el-radio-button label="round">椭圆</el-radio-button>
                              <el-radio-button label="indexes">数字</el-radio-button>
                            </el-radio-group>
                          </el-form-item>
                        </div>

                        <!--图片设置-->
                        <div
                          v-if="item.types == 3 || item.types == 4 || item.types == 5 || item.types == 12 || item.types == 13 || item.types == 14 || item.types == 15 || item.types == 16 || item.types == 17 || item.types == 22">
                          <el-form-item label="选择图片">
                            <el-link type="primary" :underline="false" @click="gotoimages(item.types)">
                              选择图片 （{{ item.images.length }}个）
                            </el-link>

                            <el-link v-if="item.images.length > 0" type="info" :underline="false">
                              鼠标拖拽下方图片可调整顺序
                            </el-link>
                          </el-form-item>

                          <draggable v-model="item.images" animation="500">
                            <transition-group>
                              <div v-for="(item_banner, index_banner) in item.images" :key="index_banner"
                                class="group-item">

                                <el-divider content-position="left">图片{{ index_banner + 1 }}</el-divider>

                                <el-form-item v-if="item.types == 5" label="导航文案">
                                  <el-input v-model="item_banner.title" placeholder="请输入文案" size="mini" maxlength="6" />
                                </el-form-item>

                                <el-row :gutter="24" class="banner-images-list">
                                  <el-col :span="6" class="banner-images-left">
                                    <el-image class="image" fit="cover" :src="item_banner.url"
                                      :preview-src-list="[item_banner.url]" />
                                    <span class="edit-image" @click="gotoimages(4, { index: index_banner, num: 1 })">
                                      <i class="el-icon-edit" />
                                      修改图片
                                    </span>
                                  </el-col>
                                  <el-col :span="18" class="banner-images-right">
                                    <el-input v-model="item_banner.name" placeholder="请输入名称">
                                      <template slot="prepend">名称</template>
                                    </el-input>

                                    <div class="mt10">
                                      <el-select v-model="item_banner.jump_type" placeholder="请选择跳转"
                                        @change="item_banner.key_id = ''">
                                        <el-option v-for="itemop in jump_options" :key="itemop.value"
                                          :label="itemop.name" :value="itemop.value" />
                                      </el-select>

                                      <el-select v-if="item_banner.jump_type == 1" v-model="item_banner.key_id"
                                        class="mt10" placeholder="请选择小程序页面">
                                        <el-option v-for="itemop in jump_options['1']['pages']" :key="itemop.value"
                                          :label="itemop.name" :value="itemop.value" />
                                      </el-select>

                                      <el-select v-if="item_banner.jump_type == 2" v-model="item_banner.key_id"
                                        class="mt10" filterable placeholder="请选择店铺页面" clearable @change="pagelist()">
                                        <el-option v-for="item in pageData" :key="item.id"
                                          :label="item.id + '/' + item.name" :value="item.page_secret" />
                                      </el-select>

                                      <el-cascader v-if="item_banner.jump_type == 3" ref="goodscategory"
                                        v-model="item_banner.key_id" class="mt10" :options="goodscategorydata"
                                        :show-all-levels="false"
                                        :props="{ checkStrictly: true, children: 'sons', label: 'name', id: 'id' }"
                                        clearable />

                                      <div v-if="item_banner.jump_type == 4" class="mt10">
                                        <span class="chose-goods"
                                          @click="gotogoods(item.types, { 'chosed_goods': [], index: index_banner, 'num': 1 })">
                                          选择商品
                                        </span>
                                        <div v-if="item_banner.key_id > 0" class="wrapper upload-picture-box">
                                          <div class="picture-item">
                                            <el-tooltip placement="bottom" effect="light">
                                              <div slot="content">
                                                id: {{ item_banner.content.id }}<br><br>
                                                名称：{{ item_banner.content.name }}<br><br>
                                                价格：{{ item_banner.content.price }}<br><br>
                                                库存：{{ item_banner.content.stocks }}<br><br>
                                                客户端展示：
                                                <el-tag v-if="item_banner.content.client_show == 1" type="success"
                                                  effect="dark" size="mini">
                                                  显示
                                                </el-tag>
                                                <el-tag v-if="item_banner.content.client_show == 0" type="info"
                                                  effect="dark">
                                                  隐藏
                                                </el-tag>
                                                <br><br>
                                                状态：
                                                <el-tag v-if="item_banner.content.status == 1" type="success"
                                                  effect="dark" size="mini">
                                                  上架中
                                                </el-tag>
                                                <el-tag v-if="item_banner.content.status == 0" type="info"
                                                  effect="dark">
                                                  已下架
                                                </el-tag>

                                              </div>
                                              <div class="picture-item-box">
                                                <el-image :src="item_banner.content.cover" fit="scale-down" />
                                              </div>
                                            </el-tooltip>
                                          </div>
                                        </div>
                                      </div>

                                      <el-input v-if="item_banner.jump_type == 5 || item_banner.jump_type == 7"
                                        v-model="item_banner.link_url" class="mt10" placeholder="请输入链接">
                                        <template slot="prepend">链接</template>
                                      </el-input>

                                      <el-input v-if="item_banner.jump_type == 6" v-model="item_banner.app_appid"
                                        class="mt10" placeholder="请输入小程序appid">
                                        <template slot="prepend">appid</template>
                                      </el-input>

                                      <el-input v-if="item_banner.jump_type == 6" v-model="item_banner.app_page"
                                        class="mt10" placeholder="请输入小程序页面地址">
                                        <template slot="prepend">页面</template>
                                      </el-input>

                                    </div>

                                  </el-col>

                                </el-row>

                                <div style="margin-top: 10px;">
                                  <el-button round plain title="删除" size="mini" type="danger" icon="el-icon-delete"
                                    @click="delcontent(index_banner, item.types)">
                                    删除
                                  </el-button>

                                  <el-button round plain title="下方新增" size="mini" type="primary" icon="el-icon-plus"
                                    @click="addcontent(index_banner, item.types)">
                                    下方新增
                                  </el-button>
                                </div>

                              </div>
                            </transition-group>
                          </draggable>
                        </div>

                        <!--搜索框-->
                        <div v-if="item.types == 6" class="search-box-content">
                          <el-form-item label="搜索热词">
                            <el-radio-group v-model="item.search_keyword_type" size="mini">
                              <el-radio-button label="0">不设置</el-radio-button>
                              <el-radio-button label="1">设置</el-radio-button>
                            </el-radio-group>
                          </el-form-item>

                          <el-form-item v-if="item.search_keyword_type == 1" label="热词">
                            <draggable v-model="item.search_keyword" class="wrapper" handle=".can-draggable"
                              animation="500">
                              <transition-group>
                                <div v-for="(item_search, index_search) in item.search_keyword" :key="item_search"
                                  class="hot-word-list">

                                  <el-input v-model="item_search.name" placeholder="请输入内容">
                                    <template slot="prepend">
                                      <i class="el-icon-rank can-draggable" />
                                    </template>
                                    <template slot="append">
                                      <i class="el-icon-delete" @click="delcontent(index_search, 'search_hot_word')" />
                                    </template>
                                  </el-input>

                                </div>
                              </transition-group>
                            </draggable>

                            <el-button type="primary" size="mini" @click="addcontent(0, 'search')">添加热词</el-button>
                          </el-form-item>
                        </div>

                        <!--商品-->
                        <div v-if="item.types == 9">
                          <el-form-item label="显示方式" prop="gooods_show_type">
                            <el-radio-group v-model="item.gooods_show_type" size="mini">
                              <el-radio-button label="1">手动选择</el-radio-button>
                              <el-radio-button label="2">商品分类</el-radio-button>
                            </el-radio-group>
                          </el-form-item>

                          <div v-if="item.gooods_show_type == 1">
                            <el-form-item label="选择商品">
                              <el-link type="primary" :underline="false"
                                @click="gotogoods(item.types, { 'chosed_goods': item.goods_content, 'num': 20 })">
                                选择商品 （{{ item.goods_content.length }}个）
                              </el-link>

                              <el-link v-if="item.goods_content.length > 0" type="info" :underline="false">
                                鼠标拖拽下方图片可调整顺序
                              </el-link>
                            </el-form-item>

                            <div>
                              <draggable v-model="item.goods_content" class="wrapper upload-picture-box"
                                animation="500">
                                <transition-group>
                                  <div v-for="(item_goods, index_goods) in item.goods_content" :key="index_goods"
                                    class="picture-item">

                                    <div class="picture-item-box">
                                      <el-image :src="item_goods.cover" fit="scale-down" />

                                      <el-button class="del-picture" size="mini" type="danger" icon="el-icon-delete"
                                        circle @click="delcontent(index_goods, item.types)" />

                                      <el-tooltip placement="top" effect="light">
                                        <div slot="content">
                                          id: {{ item_goods.id }}<br><br>
                                          名称：{{ item_goods.name }}<br><br>
                                          价格：{{ item_goods.price }}<br><br>
                                          库存：{{ item_goods.stocks }}<br><br>
                                          客户端展示：
                                          <el-tag v-if="item_goods.client_show == 1" type="success" effect="dark"
                                            size="mini">
                                            显示
                                          </el-tag>
                                          <el-tag v-if="item_goods.client_show == 0" type="info" effect="dark">
                                            隐藏
                                          </el-tag>
                                          <br><br>
                                        </div>

                                        <el-button class="del-picture" style="right: 70px;" size="mini" type="primary"
                                          circle>
                                          详
                                        </el-button>
                                      </el-tooltip>
                                    </div>

                                  </div>
                                </transition-group>
                              </draggable>
                            </div>
                          </div>

                          <el-form-item label="显示销量" prop="goods_show_volume">
                            <el-switch v-model="item.goods_show_volume" active-color="#0070C0" inactive-color="#BFBFBF"
                              active-value="1" inactive-value="0" />
                          </el-form-item>

                          <!--
                      <el-form-item label="显示划线价" prop="goods_show_market_price">
                          <el-switch
                            v-model="item.goods_show_market_price"
                            active-color="#0070C0"
                            inactive-color="#BFBFBF"
                            active-value="1"
                            inactive-value="0"
                            >
                          </el-switch>
                      </el-form-item>
                      -->
                        </div>

                        <div v-if="item.types == 10">
                          <el-form-item label="选择图片">
                            <el-link type="primary" :underline="false" @click="gotoimages(item.types, { num: 1 })">
                              选择图片
                            </el-link>

                            <div class="upload-picture-box">
                              <div v-if="item.sou_image" class="picture-item">
                                <div class="picture-item-box">
                                  <el-image :src="item.sou_image" fit="scale-down"
                                    :preview-src-list="[item.sou_image]" />

                                  <el-button class="del-picture" size="mini" type="danger" icon="el-icon-delete" circle
                                    @click="delcontent(0, 'sou_image')" />
                                </div>
                              </div>
                            </div>
                          </el-form-item>
                          <el-alert type="info">
                            <template slot>
                              <div>
                                下载示例PSD图片,
                                <a href="/static/images/sou.psd" target="_blank">
                                  <el-link type="primary">示例psd</el-link>
                                </a>
                                <br><br>
                                1.下载PSD图片后，将示例小程序名称（爱淘精选）替换成自己的小程序名称<br><br>
                                2.“品牌直供 正品保证” 可根据自己实际需要替换
                              </div>
                            </template>
                          </el-alert>
                        </div>

                        <!--生活号-->
                        <div v-if="item.types == 11">
                          <el-form-item label="组件代码" prop="lifestyle">
                            <el-input v-model="item.lifestyle" type="textarea" autosize="true"
                              placeholder="生活号组件代码，如<lifestyle sceneId='XXXXXX' />" />
                          </el-form-item>
                          <el-alert type="info">
                            <template slot>
                              <div>
                                如何获取组件代码
                                <br><br>
                                1.登录支付宝商家后台
                                <a href="https://b.alipay.com/" target="_blank">
                                  <el-link type="primary">b.alipay.com</el-link>
                                </a><br><br>
                                2.点击顶部菜单【运营中心】<br><br>
                                3.点击左侧“私域运营”下【生活号+】<br><br>
                                4.点击左侧“推广”下【关注组件】<br><br>
                                5.找到【小程序组件】后，点击【去创建】，填写内容完成创建<br><br>
                                6.注意：<el-link type="danger">【用户可见范围】必须选择 【所有用户可见】</el-link><br><br>
                                7.在【关注组件列表】中，找到创建的组件，点击【应用】进行代码复制<br><br>
                                8.将复制的组件代码，填写到组件代码内即可<br><br>
                              </div>
                            </template>
                          </el-alert>
                        </div>

                      </el-card>

                    </el-tab-pane>

                    <el-tab-pane label="样式设置" name="second">
                      <div class="sub-title">基本设置</div>

                      <!--文本-->
                      <div v-if="item.types == 1">
                        <el-form-item label="字号" prop="text_size">
                          <el-slider v-model="item.text_size" :min="10" :max="72" input-size="mini" show-input />
                        </el-form-item>

                        <el-form-item label="字色" prop="text_color">
                          <el-color-picker v-model="item.text_color" show-alpha :predefine="predefineColors"
                            @active-change="(val) => { item.text_color = val }" />
                        </el-form-item>

                        <el-form-item label="对齐方式" prop="text_align">
                          <el-radio-group v-model="item.text_align" size="mini">
                            <el-radio-button label="left">靠左</el-radio-button>
                            <el-radio-button label="center">中间</el-radio-button>
                            <el-radio-button label="right">靠右</el-radio-button>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="加粗" prop="text_bold">
                          <el-switch v-model="item.text_bold" active-color="#0070C0" inactive-color="#BFBFBF"
                            active-value="1" inactive-value="0" />
                        </el-form-item>

                        <el-form-item label="斜体" prop="text_oblique">
                          <el-switch v-model="item.text_oblique" active-color="#0070C0" inactive-color="#BFBFBF"
                            active-value="1" inactive-value="0" />
                        </el-form-item>

                        <el-form-item label="样式" prop="text_underline_through">
                          <el-radio-group v-model="item.text_underline_through" size="mini">
                            <el-radio-button :label="0">无</el-radio-button>
                            <el-radio-button :label="1">下划线</el-radio-button>
                            <el-radio-button :label="2">横穿线</el-radio-button>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="字间距" prop="text_letter_spacing">
                          <el-slider v-model="item.text_letter_spacing" :min="0" :max="20" input-size="mini"
                            show-input />
                        </el-form-item>

                        <el-form-item label="行间距" prop="text_line_height">
                          <el-slider v-model="item.text_line_height" :min="1" :max="5" input-size="mini" show-input />
                        </el-form-item>

                        <el-form-item label="圆角大小" prop="border_radius">
                          <el-slider v-model="item.border_radius" :min="0" :max="100" input-size="mini" show-input />
                        </el-form-item>

                        <el-form-item v-if="item.border_radius > 0" label="圆角单位" prop="border_radius_type">
                          <el-radio-group v-model="item.border_radius_type" size="mini">
                            <el-radio-button label="px" />
                            <el-radio-button label="%" />
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="背景颜色">
                          <el-color-picker v-model="item.text_bg_color" show-alpha :predefine="predefineColors"
                            @active-change="(val) => { item.text_bg_color = val }" />
                        </el-form-item>
                      </div>

                      <!--公告-->
                      <div v-if="item.types == 2">
                        <el-form-item label="背景颜色" prop="notice_bg_color">
                          <el-color-picker v-model="item.notice_bg_color" show-alpha :predefine="predefineColors"
                            @active-change="(val) => { item.notice_bg_color = val }" />
                        </el-form-item>
                        <el-form-item label="文字颜色" prop="notice_color">
                          <el-color-picker v-model="item.notice_color" show-alpha :predefine="predefineColors"
                            @active-change="(val) => { item.notice_color = val }" />
                        </el-form-item>
                      </div>

                      <!--图片-->
                      <div v-if="item.types == 3">
                        <el-form-item label="圆角" prop="border_radius">
                          <el-slider v-model="item.border_radius" :min="0" :max="100" input-size="mini" show-input />
                        </el-form-item>

                        <el-form-item v-if="item.border_radius > 0" label="圆角单位" prop="border_radius_type">
                          <el-radio-group v-model="item.border_radius_type" size="mini">
                            <el-radio-button label="px">px</el-radio-button>
                            <el-radio-button label="%">%</el-radio-button>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="边距" prop="image_padding">
                          <el-slider v-model="item.image_padding" :min="0" :max="50" input-size="mini" show-input />
                        </el-form-item>
                      </div>

                      <!--导航组-->
                      <div v-if="item.types == 5">
                        <el-form-item label="展示样式" prop="nav_round" hidden>
                          <el-radio-group v-model="item.nav_type" size="mini">
                            <el-radio-button label="1">单行展示</el-radio-button>
                            <el-radio-button label="2">多行展示</el-radio-button>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="图标样式" prop="nav_round">
                          <el-radio-group v-model="item.nav_round" size="mini">
                            <el-radio-button label="1">方形</el-radio-button>
                            <el-radio-button label="2">圆形</el-radio-button>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="一行个数" prop="nav_num">
                          <el-radio-group v-model="item.nav_num" size="mini">
                            <el-radio-button :label="3">3个</el-radio-button>
                            <el-radio-button :label="4">4个</el-radio-button>
                            <el-radio-button :label="5">5个</el-radio-button>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="文字颜色" prop="nav_text_color">
                          <el-color-picker v-model="item.nav_text_color" show-alpha :predefine="predefineColors"
                            @active-change="(val) => { item.nav_text_color = val }" />
                        </el-form-item>
                      </div>

                      <!--搜索框-->
                      <div v-if="item.types == 6">
                        <el-form-item label="边框样式" prop="search_radius">
                          <el-radio-group v-model="item.search_radius" size="mini">
                            <el-radio-button label="0">直角</el-radio-button>
                            <el-radio-button label="30">圆角</el-radio-button>
                          </el-radio-group>
                        </el-form-item>
                      </div>

                      <!--辅助线-->
                      <div v-if="item.types == 7">
                        <el-form-item label="辅助线样式" prop="line_type">
                          <el-radio-group v-model="item.line_type" size="mini">
                            <el-radio-button label="dashed">虚线</el-radio-button>
                            <el-radio-button label="solid">实线</el-radio-button>
                            <el-radio-button label="dotted">点状线</el-radio-button>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="辅助线高度" prop="height">
                          <el-slider v-model="item.height" :min="1" :max="100" input-size="mini" show-input />
                        </el-form-item>

                        <el-form-item label="辅助线颜色">
                          <el-color-picker v-model="item.line_color" show-alpha :predefine="predefineColors"
                            @active-change="(val) => { item.line_color = val }" />
                        </el-form-item>
                      </div>

                      <!--辅助块-->
                      <div v-if="item.types == 8">
                        <el-form-item label="辅助块高度" prop="height">
                          <el-slider v-model="item.height" :min="10" :max="500" input-size="mini" show-input />
                        </el-form-item>

                        <el-form-item label="辅助块颜色">
                          <el-color-picker v-model="item.block_bg_color" show-alpha :predefine="predefineColors"
                            @active-change="(val) => { item.block_bg_color = val }" />
                        </el-form-item>
                      </div>

                      <!--商品-->
                      <div v-if="item.types == 9">
                        <el-form-item label="显示类型" prop="goods_type">
                          <el-radio-group v-model="item.goods_type" size="mini">
                            <el-radio-button :label="1">1行1个</el-radio-button>
                            <el-radio-button :label="2">1行2个</el-radio-button>
                            <el-radio-button :label="3">1行3个</el-radio-button>
                            <el-radio-button :label="4">1行1个(左右)</el-radio-button>
                          </el-radio-group>
                        </el-form-item>

                        <el-form-item label="价格颜色">
                          <el-color-picker v-model="item.goods_price_color" show-alpha :predefine="predefineColors"
                            @active-change="(val) => { item.goods_price_color = val }" />
                        </el-form-item>
                      </div>

                      <div class="sub-title">模块设置</div>

                      <el-form-item label="模块背景">
                        <el-color-picker v-model="item.bg_color" show-alpha :predefine="predefineColors"
                          @active-change="(val) => { item.bg_color = val }" />
                      </el-form-item>

                      <div class="sub-title">距离设置</div>

                      <el-form-item label="上边距">
                        <el-slider v-model="item.padding_top" :min="0" :max="100" input-size="mini" show-input />
                      </el-form-item>

                      <el-form-item label="下边距">
                        <el-slider v-model="item.padding_bottom" :min="0" :max="100" input-size="mini" show-input />
                      </el-form-item>

                      <el-form-item label="左右边距">
                        <el-slider v-model="item.padding_left_right" :min="0" :max="100" input-size="mini" show-input />
                      </el-form-item>

                      <el-form-item label="顶部间距">
                        <el-slider v-model="item.margin_top" :min="0" :max="500" input-size="mini" show-input />
                      </el-form-item>

                    </el-tab-pane>
                  </el-tabs>

                </div>

              </div>
            </el-form>

          </el-col>
        </el-drawer>

      </el-row>

    </div>


    <el-drawer title="商品" :visible.sync="goodsVisible" size="80%" :modal="true">
      <!--商品页面 -->
      <goods-list-chose source="goodsadd" :parameter="goodsParameter" ref="GoodsListChose" />

      <div style="position: fixed;bottom: 20px;margin-left: 20px; z-index: 999;">
        <el-button type="primary" @click="surechosegoods()">确定选择</el-button>
      </div>
    </el-drawer>


    <el-drawer title="图库" :visible.sync="imagesVisible" size="80%" :modal="true">
      <!--图库页面 -->
      <images-list source="goodsadd" :parameter="imagesParameter" ref="ImagesList" />

      <div style="position: fixed;bottom: 20px;margin-left: 20px;">
        <el-button type="primary" @click="surechose()">确定选择</el-button>
      </div>
    </el-drawer>


    <!--这里是存放的视频列表-->
    <el-drawer title="我的视频" :visible.sync="drawer_video" :with-header="true" size="50%">

      <div style="padding: 0 20px;">
        <el-alert title="" type="error" :closable="false">
          <template slot>
            温馨提示：请不要上传和使用非法/侵权/涉黄等视频！
          </template>
        </el-alert>


        <div style="margin-top: 15px;">
          <el-input placeholder="请输入视频名称" class="input-with-select" v-model="videodata.listQuery.keywords"
            style="width: 200px;">
            <el-button slot="append" icon="el-icon-search" type="danger" @click="getVideoList"></el-button>
          </el-input>

          <el-upload style="width: 200px;display: inline-block;" class="upload-demo"
            :action="`${baseapi}/store/uploadvideoqiniu`" :headers="headers" :data="{ types: 1 }" name="video"
            :multiple="true" :before-upload="handleBeforeUploadVideo" :on-success="videoSuccess" :on-error="videoError"
            :show-file-list="false" :limit="9" accept=".mp4, .mkv">
            <el-button size="" type="danger" style="margin: 0px 10px;">
              <i class="el-icon-upload"></i>上传本地视频
            </el-button>
          </el-upload>

          <div style="margin-top: 10px;">
            <el-radio-group v-model="videodata.listQuery.source" @change="getVideoList">
              <el-radio-button label="mine">我的视频</el-radio-button>
            </el-radio-group>

            <div v-if="videodata.listQuery.source == 'mine'" style="margin-top: 20px;">
              <el-radio-group v-model="videodata.listQuery.mine_source" @change="getVideoList">
                <!-- <el-radio-button label="all">全部</el-radio-button> -->
              </el-radio-group>
            </div>

          </div>
        </div>


        <el-row>
          <el-col :sm='12' :lg='6' :xl='6' v-for="(item, index) in videodata.list" style="padding:20px;">
            <el-card :body-style="{ padding: '20px', background: 'rgb(36,52,16,0.2)' }" shadow="always"
              class="demo-image__prediv">

              <div>
                <video-player class="video-player vjs-custom-skin" ref="videoPlayer" src="" :playsinline="true"
                  :options="{ fluid: true, sources: [{ type: '', src: item.video }] }"></video-player>
              </div>

              <el-radio v-model="videodata.index" :label="index" style="margin: 10px 0 0;">选择这个</el-radio>

            </el-card>
          </el-col>
        </el-row>

        <pagination v-if="videodata.total > 0" :total="videodata.total" :page.sync="videodata.listQuery.page"
          :limit.sync="videodata.listQuery.limit" @pagination="getVideoList" />

      </div>

      <div style="position: fixed;bottom: 10px;" v-if="videodata.index >= '0'">
        <el-button type="primary" @click="okVideo" style="margin-left: 20px;">确认使用</el-button>
      </div>

    </el-drawer>

  </div>
</template>

<style></style>
<style scoped>
.ant-carousel {
  line-height: 0;
}
</style>
<script>
import Cookies from 'js-cookie'
import ImagesList from '@/views/imagesgallery/images-list.vue'
import GoodsListChose from '@/views/goods/goods-list-chose.vue'
import { goodscategorylist } from '@/api/goods'
import { pagelist, assemblylibrary, addassembly, pagesave, setsinglepagedefault, addassemblydefault, initAssemblyData, saveMobanStyle, pageinfo, pageTemplateInfo, assemblylibraryeasy } from '@/api/store'
import {videolist} from '@/api/miniapp.js'
import { seckilAll } from '@/api/seckill.js'
import { ZerobuyAll } from '@/api/buyzero.js'
import { tradeinAll } from '@/api/tradein.js'
import { buygiveAll } from '@/api/buygive.js'
import { parseTime } from '@/utils'
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
// 可选择导入默认样式
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
import store from '@/store'
import { getToken } from '@/utils/auth'
import { MessageBox, Message } from 'element-ui'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import draggable from 'vuedraggable'
import vueSeamlessScroll from 'vue-seamless-scroll'
import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);
import tinymce from '@/components/Tinymce/index.vue'
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import clipboard from '@/directive/clipboard/index.js'
import '@/assets/css/page.scss';
import { LazyImg, Waterfall } from 'vue-waterfall-plugin'
import 'vue-waterfall-plugin/dist/style.css'
import Carousel from 'ant-design-vue/lib/carousel'
import 'ant-design-vue/lib/carousel/style/index.css'
Vue.use(Carousel)

export default {
  name: "page-add",
  components: { ImagesList, GoodsListChose, Pagination, draggable, vueSeamlessScroll, tinymce, Waterfall, LazyImg, videoPlayer },
  props: {

  },
  data: function () {
    return {
      miniapp_id: "",
      goods_example: [
        {
          "id": 0,
          "sku_id": 0,
          "name": "这是商品名称，测试1",
          "cover": "/static/images/ex-goods.png",
          "price": "0.01",
          "client_show": 0,
          "volume": 0,
          "status": 0,
          "stocks": 0
        },
        {
          "id": 0,
          "sku_id": 0,
          "name": "这是商品名称，测试2",
          "cover": "/static/images/ex-goods.png",
          "price": "0.01",
          "client_show": 0,
          "volume": 0,
          "status": 0,
          "stocks": 0
        },
      ],
      banner_example: [
        {
          "url": "/static/images/ex-banner.png",
        },
        {
          "url": "/static/images/ex-banner.png",
        },
        {
          "url": "/static/images/ex-banner.png",
        },
      ],
      version: "0",
      value: 1,
      loading: false,
      loadingYL: false,
      libraryData: [],
      pageData: [],
      page_set: 'page_basic',
      activeNames: 'zjk',
      zujianTabs: 'first',
      toolbar: 'undo redo | fontsizeselect forecolor backcolor | bold italic underline  strikethrough | '
        + 'alignleft aligncenter alignright alignjustify | outdent indent | hr numlist bullist | '
        + ' prediv removeformat',
      menubar: '',
      baseapi: process.env.VUE_APP_BASE_API,
      headers: { 'Authorization': getToken() },
      drawer: false,//图库抽屉 true打开 false隐藏
      drawer_source: 0,//图库抽屉 1是从模块背景 2是从图片 3是从表单背景 4表单按钮背景 5轮播图
      imagesVisible: false,//图库显示 true 显示 false隐藏
      imagesType: "",//cover banner
      imagesParameter: {},//点击去图库后保存的参数
      list: [],//正式编辑版本
      list_edit: [],//编辑版本
      list_line: [],//线上版本
      current_mk: 0,//当前显示的模块id
      current_index: 0,//当前操作组件的第一个index（模块）
      ldy: 0,//页面设置页面 0不显示 1显示
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 255, 255, 1)',
        'rgba(0, 0, 0, 1)',
        '#ccc',
        'rgba(253, 219, 195, 1)'
      ],
      openeds: ["1", "2", "3"],//组件展开，基础组件/营销组件/活动组件，默认目前组件
      current_select: "",//默认显示的组件
      datas: {//此单页面的信息
        id: "",
        title: "",//页面标题
        name: "",//页面名称，后台管理看的
        bg_color: "#ffffff",//页面背景颜色
        is_default: 0,//是否是默认
        templatType: {},
        storeInfo: {}
      },
      page_id: 0,//当前页面id
      //跳转的类型
      jump_options: [
        { 'name': '不跳转', 'value': 0 },
        {
          'name': '小程序页面',
          'value': 1,
          'pages': [
            { 'name': '首页', 'value': '/pages/index/index' },
            { 'name': '商品分类', 'value': '/pages/goods/goodscategory' },
            { 'name': '商品列表', 'value': '/pages/goods/goodslist' },
            { 'name': '购物车', 'value': '/pages/cart/cart' },
            { 'name': '我的', 'value': '/pages/mine/center' },
            { 'name': '我的订单', 'value': '/pages/order/order' },
          ]
        },
        { 'name': '店铺页面', 'value': 2 },
        { 'name': '分类商品列表', 'value': 3 },
        { 'name': '商品详情页', 'value': 4 },
        { 'name': '跳转网页', 'value': 5 },
        { 'name': '跳转小程序', 'value': 6 },
        { 'name': '其他支付宝链接', 'value': 7 },
        { 'name': '客服跳转', 'value': 8 }
      ],
      goodscategorydata: [],//商品分类数据
      goodsVisible: false,
      goodsType: "",//cover banner
      goodsParameter: {},//点击去商品列表后保存的参数
      assembVisible: false, //编辑组件详情,
      seckillActiveList: [],
      tradeinList: [],
      zerobuyList: [],
      buygiveList: [],
      drawer_video: false,
      drawer_video_source: 0,
      videodata: {
        index: "",//当前选中的视频的index
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          keywords: "",//搜索关键字
          source: "mine",//图库 mine我的 free免费
          sort: 'id_desc'//默认的排序
        },
      },
    };
  },
  created() {


    var mid = Cookies.get('mid');
    this.miniapp_id = mid;

    this.getList();

    //商品分类
    this.goodscategorylist();

    //店铺页面
    this.pagelist();

    //组件库
    this.getassemblylibrary();
    //获取默认的组件信息
    this.getassemblyDefault();

    //秒杀活动加载
    this.seckillActivehandler();

    this.zerobuyHandler();

    this.tradeinHandler();
    this.buygiveHandler();
    this.getVideoList();

  },
  mounted() {
    window.addEventListener('mousedown', this.handleKeepActive);
    window.addEventListener('keyup', this.keyUp);//监听键盘按下

  },
  watch: {

  },
  computed: {
    // 滚动区高度
    scrollerHeight: function () {
      //return window.innerHeight; //自定义高度需求
    }
  },
  // 不要忘记销毁
  beforeDestroy() {
    window.removeEventListener('mousedown', this.handleKeepActive);
    window.removeEventListener('keyup', this.keyUp);//监听键盘按下
  },
  directives: {
    clipboard
  },
  methods: {
    //点击确认选择视频
    okVideo(){
        var index = this.current_index; //当前组件索引

        var drawer_source = this.drawer_source;

        var video_index = this.videodata.index;//当前选中的图片的index
        var current_video_name = this.videodata.list[video_index]['name'];//选中的视频名称
        var current_video = this.videodata.list[video_index]['video'];//选中的视频

        this.list[index]['video_content'] =  current_video;

        this.videodata.index = "";

        this.drawer_video = false;

        this.$message({
          message: '选择成功！',
          type: 'success'
        });
    },
    //获得视频列表数据
    getVideoList() {
      this.videodata.listLoading = true
      videolist(this.videodata.listQuery).then(response => {
        setTimeout(() => {
          this.videodata.listLoading = false
        }, 100)

        let code = response.code;
        let msg = response.msg;
        if (code == 200) {
          this.videodata.list = response.response.data
          this.videodata.total = response.response.total
        }
      }).catch(err => {
        setTimeout(() => {
          this.videodata.listLoading = false
        }, 100)
      })
    },
    //上传视频失败后
    videoError(response, file, fileList) {
      this.$message.warning({
        message: '上传视频失败！'
      })
      return false
    },
    //上传视频成功后
    videoSuccess(response, file, fileList) {
      var code = response.code;
      var msg = response.msg;
      if (code == 200) {
        this.videodata.index = ""
        this.getVideoList()
        MessageBox.confirm(msg, {
          type: 'success',
          showCancelButton: false,
          showConfirmButton: false,
        })
      } else {
        MessageBox.confirm(msg, {
          type: 'error',
          showCancelButton: false,
          showConfirmButton: false,
        })
      }
    },
    //上传之前
    handleBeforeUploadVideo(file) {
      const uploadTypes = ['mp4', 'mkv']
      const filetype = file.name.replace(/.+\./, '')

      if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
        this.$message.warning({
          message: '请上传后缀名为mp4的视频'
        })
        return false
      }
      return true
    },
    //显示视频图库
    drawervideosource(source) {
      this.drawer_video = true;
      this.drawer_video_source = source;
    },
    //买赠
    buygiveHandler() {
      buygiveAll().then(response => {
        if (response.code == 200) {
          this.buygiveList = response.response
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    //换购
    tradeinHandler() {
      tradeinAll().then(response => {
        if (response.code == 200) {
          this.tradeinList = response.response
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    //零元购
    zerobuyHandler() {
      ZerobuyAll().then(response => {
        if (response.code == 200) {
          this.zerobuyList = response.response
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    //秒杀活动所有
    seckillActivehandler() {
      seckilAll().then(response => {
        if (response.code == 200) {
          this.seckillActiveList = response.response
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    //保存为默认模板
    // async saveDefaultTemplate(){
    //   const data=await addassemblydefault(this.list)
    //   this.$message.success('已经保存为默认模板了')

    // },
    keyUp(e) {
      //监听键盘按钮
      var index = this.current_index;

      var keyCode = e.keyCode || e.which;

      switch (keyCode) {
        case 46://delete
          this.delmodule();
          break;
        case 38://top(y轴往上面移动，注意如果有上下滚动条就会冲突)
          this.sortmodule(0, 1, index);
          break;
        case 40://bottom(y轴往下面移动，注意如果有上下滚动条就会冲突)
          this.sortmodule(0, 2, index);
          break;
      }

    },
    //切换版本
    changeVersion() {
      var version = this.version;
      if (version == 1) {
        this.list = JSON.parse(JSON.stringify(this.list_edit));
      } else if (version == 2) {
        //线上版本
        this.list = JSON.parse(JSON.stringify(this.list_line));
      }
    },
    //获取组件默认的数据信息
    getassemblyDefault() {
      initAssemblyData({ template_id: this.$route.params.id }).then(response => {
        if (response.code == 200) {
          this.$nextTick(function () {
            this.list = response.response || []
          });
        }
      })
    },
    //获得组件库
    getassemblylibrary() {
      assemblylibraryeasy({}).then(response => {
        if (response.code == 200) {
          this.libraryData = response.response;
        }
      }).catch(err => {

      })
    },
    //获得所有的店铺页面
    pagelist(query = '', page_id = 0) {
      var current_page_id = this.page_id;
      if (page_id == 0) {
        if (query == '') {
          var arr = { current_page_id: current_page_id, 'source': 'all', keyword: '', sort: 'id_asc' };
        } else {
          var arr = { current_page_id: current_page_id, keyword: query, 'source': 'all', sort: 'id_asc' };
        }
      } else {
        var arr = { current_page_id: current_page_id, keyword_type: 3, id: page_id, 'source': 'all', sort: 'id_asc' };
      }

      pagelist(arr).then(response => {
        if (response.code == 200) {
          this.pageData = response.response.data;
        }
      }).catch(err => {

      })
    },
    //获得商品分类
    goodscategorylist(handle = 1) {

      goodscategorylist({ type: 1, miniapp_id: this.miniapp_id }).then(response => {
        if (handle == 2) {
          //刷新
          this.goodscategorydata = [];
        }

        if (response.code == 200) {
          var goodscategorydata = this.goodscategorydata;
          var res = response.response;
          res.forEach(item => {
            const menu = {
              name: item.name,
              picture: item.picture,
              remark: item.remark,
              sons: item.sons,
              id: item.id,
              pid: item.pid,
              sort: item.sort,
              value: item.value,
              status: item.status,
            }

            goodscategorydata.push(menu)
          })
        }
        if (handle == 2) {
          //刷新
          this.$message.success("商品分类刷新成功！");
        }
      }).catch(err => {

      })
    },
    //确认选择图片
    surechose() {
      var imagesType = this.imagesType;
      var imagesParameter = this.imagesParameter;
      var pictures = this.$refs.ImagesList.choseImage();

      var index = this.current_index;

      var len = pictures.length;

      var current_image = pictures[0]['picture'];//一张的情况下

      /*if (imagesType == 1 || imagesType == 2 || imagesType == 10) {
            if (len == 0) {
                this.$message.error("请选择图片");
                return false;
            } else if (len != 1) {
                this.$message.error("只能选择1张");
                return false;
            }
      }*/

      if (imagesType == 1) {//模块的背景
        this.list[index]['bg_picture'] = current_image;
      } else if (imagesType == 3 || imagesType == 4 || imagesType == 5 || imagesType == 12 || imagesType == 13 || imagesType == 14 || imagesType == 15 || imagesType == 16 || imagesType == 17 || imagesType == 22) {//图片、轮播图、图文导航 广告图片
        var has_par_index = ("index" in imagesParameter);
        if (has_par_index == true) {
          //下面的一张图
          var par_index = imagesParameter['index'];
          this.list[index]['images'][par_index]['url'] = pictures[0]['picture'];
          this.list[index]['images'][par_index]['content']['width'] = pictures[0]['picture_width'];
          this.list[index]['images'][par_index]['content']['height'] = pictures[0]['picture_height'];
        } else {
          //图
          for (var i in pictures) {
            var option = {
              "name": pictures[i]['name'],
              "url": pictures[i]['picture'],
              "jump_type": "",
              "key_id": "",
              "link_url": "",
              "app_appid": "",
              "app_page": "",
              "content": {
                'width': pictures[i]['picture_width'],
                'height': pictures[i]['picture_height'],
              },
            };
            this.list[index]['images'].push(option);
          }
        }
      } else if (imagesType == 10) {//上直搜图片
        this.list[index]['sou_image'] = current_image;
      } else if (imagesType == 'ldy') {//落地页背景图片
        this.datas['bg_picture'] = current_image;
      }

      this.imagesVisible = false;
      this.$refs.ImagesList.clearImage();
      this.$message.success("选择成功！");

    },
    //点击去图库
    gotoimages(type, parameter = {}) {
      this.imagesType = type;
      this.imagesParameter = parameter;

      if (type == 12 || type == 13 || type == 14) {
        this.imagesParameter = { 'chosed_goods': [], 'num': type - 11 }
      }
      if (type == 15) {
        this.imagesParameter = { 'chosed_goods': [], 'num': 3 }
      }
      if (type == 16) {
        this.imagesParameter = { 'chosed_goods': [], 'num': 4 }
      }
      if (type == 17) {
        this.imagesParameter = { 'chosed_goods': [], 'num': 4 }
      }
      if (type == 22) {
        this.imagesParameter = { 'chosed_goods': [], 'num': 1 }
      }
      this.imagesVisible = true;

    },
    //删除内容（图片等）
    delcontent(index, type) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var index1 = this.current_index;
        if (type == 3 || type == 4 || type == 5 || type == 12 || type == 13 || type == 14 || type == 15 || type == 16 || type == 17 || type == 22) {
          //图片、轮播图、图文导航
          this.list[index1]['images'].splice(index, 1);
        } else if (type == 'search_hot_word') {
          //搜索热词
          this.list[index1]['search_keyword'].splice(index, 1);
        } else if (type == 'sou_image') {
          //上直搜图片
          this.list[index1]['sou_image'] = "";
        } else if (type == 'ldy_bg_picture') {
          //落地页背景图片
          this.datas['bg_picture'] = "";
        } else if (type == 9) {
          //商品
          this.list[index1]['goods_content'].splice(index, 1);
        }
      });
    },
    //新增内容
    //index 是在哪个下方新增
    //type 是在哪个类型的组件
    addcontent(index, type) {
      var index1 = this.current_index;
      if (type == 3 || type == 4 || type == 5) {
        //图片、轮播图、图文导航
        var oneimage = { "name": "", "url": "", "jump_type": "", "key_id": "", "link_url": "", "app_appid": "", "app_page": "", "content": {} };
        this.list[index1]['images'].splice(index + 1, 0, oneimage);
      } else if (type == 'search') {
        //搜索框热词
        var len = this.list[index1]['search_keyword'].length;
        if (len < 20) {
          var hot_word = { "name": "热词" };
          this.list[index1]['search_keyword'].splice(len + 1, 0, hot_word);
        } else {
          this.$message.error("最多设置20个热词！");
        }
      } else if (type == 13 || type == 14) {//广告组件
        //两个广告图
        let len = this.list[index1]['images'].length;

        if (len >= type - 11) {
          this.$message.error(`最多${type - 11}张图！`);
          return;
        }
        var oneimage = { "name": "", "url": "", "jump_type": "", "key_id": "", "link_url": "", "app_appid": "", "app_page": "", "content": {} };
        this.list[index1]['images'].splice(index + 1, 0, oneimage);
      } else if (type == 15) {
        //两个广告图
        let len = this.list[index1]['images'].length;
        if (len >= 3) {
          this.$message.error(`最多3张图！`);
          return;
        }
        var oneimage = { "name": "", "url": "", "jump_type": "", "key_id": "", "link_url": "", "app_appid": "", "app_page": "", "content": {} };
        this.list[index1]['images'].splice(index + 1, 0, oneimage);
      } else if (type == 16) {
        //两个广告图
        let len = this.list[index1]['images'].length;
        if (len >= 3) {
          this.$message.error(`最多4张图！`);
          return;
        }
        var oneimage = { "name": "", "url": "", "jump_type": "", "key_id": "", "link_url": "", "app_appid": "", "app_page": "", "content": {} };
        this.list[index1]['images'].splice(index + 1, 0, oneimage);
      } else if (type == 17) {
        //两个广告图
        let len = this.list[index1]['images'].length;
        if (len >= 3) {
          this.$message.error(`最多4张图！`);
          return;
        }
        var oneimage = { "name": "", "url": "", "jump_type": "", "key_id": "", "link_url": "", "app_appid": "", "app_page": "", "content": {} };
        this.list[index1]['images'].splice(index + 1, 0, oneimage);
      } else if (type == 22) {
        let len = this.list[index1]['images'].length;
        if (len >= 1) {
          this.$message.error(`最多1张图！`);
          return;
        }
        var oneimage = { "name": "", "url": "", "jump_type": "", "key_id": "", "link_url": "", "app_appid": "", "app_page": "", "content": {} };
        this.list[index1]['images'].splice(index + 1, 0, oneimage);
      }
    },
    //点击去商品
    gotogoods(type, parameter = {}) {
      //console.log(parameter);
      this.goodsType = type;
      this.goodsVisible = true;
      this.goodsParameter = parameter;
    },
    //确认选择商品
    surechosegoods() {
      var goodsType = this.goodsType;//组件
      var goodsParameter = this.goodsParameter;
      var choseGoods = this.$refs.GoodsListChose.choseGoods();//选择的商品

      if (choseGoods == false) {
        return false;
      } else {
        var index = this.current_index;

        var par_index = goodsParameter['index'];
        var limit_num = goodsParameter['num'];//限制上传几个商品

        if (goodsType == 9) {//商品组件
          this.list[index]['goods_content'] = choseGoods;
          console.log(choseGoods);
        } else if (goodsType == 1 || goodsType == 2) {//文本和公告跳转选择的商品
          this.list[index]['jump_content']['key_id'] = choseGoods[0]['sku_id'];
          this.list[index]['jump_content']['content'] = choseGoods[0];
        } else if (goodsType == 3 || goodsType == 4 || goodsType == 5) {
          this.list[index]['images'][par_index]['key_id'] = choseGoods[0]['sku_id'];
          var width = this.list[index]['images'][par_index]['content']['width'];
          var height = this.list[index]['images'][par_index]['content']['height'];
          this.list[index]['images'][par_index]['content'] = choseGoods[0];
          this.list[index]['images'][par_index]['content']['width'] = width;
          this.list[index]['images'][par_index]['content']['height'] = height;
        }

        this.goodsVisible = false;
        //this.$refs.ImagesList.clearImage();
        this.$message.success("选择成功！");
      }

    },
    //点击模块（就是左右两边的）
    mokuai(id, index) {
      this.assembVisible = true
      this.current_index = index;
      this.current_mk = id;
    },
    //设置为默认页面
    setdefault() {
      this.$confirm('确定设置为小程序默认首页么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setsinglepagedefault({ page_id: this.page_id }).then(response => {
          var code = response.code;
          var msg = response.msg;
          if (code == 200) {
            this.$message.success(msg);
          } else {
            this.$message.error(msg);
          }
        }).catch(err => {

        })
      });
    },
    //保存页面
    singlepagesave() {
      singlepagesave(this.datas).then(response => {
        var code = response.code;
        var msg = response.msg;
        if (code == 200) {
          this.$message({
            message: msg,
            type: 'success'
          });
        } else {
          this.$message({
            message: msg,
            type: 'error'
          });
        }
      }).catch(err => {
        console.log(err);
      })
    },
    //保存页面（组件和页面设置）
    savepage(source = 1) {
      if (source == 1) {
        this.$confirm('确定保存么？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.savepage2(source);
        });
      } else {
        this.savepage2(source);
      }
    },
    savepage2(source) {
      if (source == 1) {
        this.loading = true;
      } else {
        this.loadingYL = true;
      }
      saveMobanStyle({ list: this.list, template_id: this.$route.params.id }).then(response => {
        if (source == 1) {
          this.loading = false;
        } else {
          this.loadingYL = false;
        }
        var code = response.code;
        var msg = response.msg;
        if (code == 200) {
          this.$message.success(msg);
        } else {
          this.$message.error(msg);
        }
      }).catch(err => {
        if (source == 1) {
          this.loading = false;
        } else {
          this.loadingYL = false;
        }
      })
    },
    //新增组件
    addassembly(types) {
      const loading = this.$loading({
        lock: true,
        text: '加载中……',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      addassemblydefault({ template_id: this.$route.params.id, types: types }).then(response => {
        var code = response.code;
        var msg = response.msg;

        setTimeout(() => {
          loading.close();
        }, 100);
        if (code == 200) {
          var data = response.response;

          var len = this.list.length;
          if (len > 0) {
          }

          var index = this.current_index;
          var add_index = index + 1;

          this.current_index = add_index;

          this.list.splice(add_index, 0, data);

        } else {
          this.$message({
            message: msg,
            type: 'error'
          });
        }
      }).catch(err => {
        console.log(err);
        setTimeout(() => {
          loading.close();
        }, 100);
      })
    },
    //模块排序 pid 上一级的id position 方位 1是在此id的上方  2是在此id的下方
    sortmodule(id, position, index) {
      if (position == 1) {//上移动
        if (index == 0) {
          this.$message({
            message: "已经在最上面，无法上移了！",
            type: 'error'
          });
          return false;
        }
        //这里是上移的前端操作（因为如果请求服务器再改变，体验很差）
        this.upRecord(this.list, index);
      }

      if (position == 2) {//下移动
        if (index == this.list.length - 1) {
          this.$message({
            message: "已经在最下面，无法下移了！",
            type: 'error'
          });
          return false;
        }
        //这里是下移的前端操作（因为如果请求服务器再改变，体验很差）
        this.downRecord(this.list, index);
      }
    },
    //删除模块
    delmodule() {
      var index = this.current_index;
      this.$confirm('此操作将删除该模块, 确定删除吗？', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.list.splice(index, 1)
      });
    },
    //复制模块
    copymodule() {
      var index = this.current_index;
      var data = this.list[index];
      var add_index = index + 1;

      this.list.splice(add_index, 0, data);

      this.list = JSON.parse(JSON.stringify(this.list))

      this.current_index = add_index;
    },
    //这个就是判断点击的，是在画布外面还是里面
    handleKeepActive(e) {
      //这个方法就是选中画布外的设置的 相对应的组件应该也要选中，无法实现
      var index = this.current_index;

      //console.log(e);
      const target = e.target || e.srcElement
      //console.log('点击处于画布内：', this.$refs.draw.contains(target))
      if (this.$refs.draw.contains(target)) {
        //画布内，点击其他组件，则此组件选中取消
        this.ldy = 0;
      } else {

        var el2 = document.getElementById("ldy-box");//手机那里点击最上面的页面
        if (el2.contains(target)) {
          this.ldy = 1;
          this.current_index = "-1111";
        }
      }
      return false
    },
    //获得列表数据
    getList() {
      if (this.$route.params && this.$route.params.id) {
        this.page_id = this.$route.params.id;
        pageTemplateInfo({ page_id: this.page_id }).then(response => {
          console.log(response.response);
          var code = response.code;
          var msg = response.msg;
          if (code == 200) {
            // this.list = response.response.list;

            this.list_edit = JSON.parse(JSON.stringify(response.response.list));
            this.list_line = JSON.parse(JSON.stringify(response.response.list2));
            this.datas = response.response.data;
          } else {
            this.$message({
              message: msg,
              type: 'error'
            });
          }
        })
      } else {
        this.$message.error("参数错误！非法操作！");
      }
    },
    //目前没有用
    handleOpen(key, keyPath) {
      //console.log(key, keyPath);
    },
    //目前没有用
    handleClose(key, keyPath) {
      //console.log(key, keyPath);
    },
    //这里是组件点击后显示组件的内容
    handleSelect(key) {
      this.current_select = key;
    },
    onDeactivated() {
      //alert("每当用户单击组件外的任何位置时调用")
    },
    onActivated(id, mkid) {
      //alert("单击组件时调用，以显示句柄");
      //console.log(x);
      this.current_mk = mkid;
    },
    del(e) {
      //console.log(e);
    },
    handleBlur() {
      //alert("dd")
    },
    swapItems(arr, index1, index2) {//交换元素 --//数组,元素1，元素2
      this.current_index = index2;
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    upRecord(arr, index) {//上移
      if (index == 0) {
        return;
      }
      this.swapItems(arr, index, index - 1);
    },
    downRecord(arr, index) {//下移
      if (index == arr.length - 1) {
        return;
      }
      this.swapItems(arr, index, index + 1);
    },
    toFirst(fieldData, index) {//置顶
      if (index != 0) {
        fieldData.unshift(fieldData.splice(index, 1)[0]);
      }
    },
    toLast(fieldData, index) {//置底
      // fieldData[index] = fieldData.splice(0, 1, fieldData[index])[0]; 这种方法是与另一个元素交换了位子，
      fieldData.push(fieldData.splice(index, 1)[0]);
    },
  }
};

</script>


<style scoped>
.assembhover {
  min-height: 100px;
  position: relative;
}

.assembhover .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}

.assembhover:hover .mask {
  background-color: rgba(204, 204, 204, .3)
}

.assembhover:hover button {
  display: inline-block;
}

.assembhover .assembhover-button {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  transform: translate(-50%, -50%);
  z-index: 2;

}

::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

.liuhai-header-yk {
  width: 40%;
  height: 30px;
  position: absolute;
  top: -10px;
  background-color: #000;
  left: 50%;
  z-index: 100;
  border-radius: 15px;
  transform: translate(-50%);
}

.iphone-border-left {
  position: absolute;
  width: 30px;
  height: 1000px;
  top: -13px;
  left: -30px;
  background: url('/static/images/apple2.png') left top no-repeat;
  background-size: 434px 928px;
}

.iphone-border-right {
  position: absolute;
  width: 28px;
  height: 1000px;
  top: -13px;
  right: -28px;
  background: url('/static/images/apple2.png') right top no-repeat;
  background-size: 434px 928px;
}

.iphone-border-top {
  position: absolute;
  width: 451px;
  height: 80px;
  top: -13px;
  right: -46px;
  background: url('/static/images/apple2.png') left top no-repeat;
  background-size: 433px 701px;
  z-index: 12;
}


.iphone-border-bottom {
  position: absolute;
  width: 448px;
  height: 52px;
  left: -29px;
  bottom: -41px;
  background: url('/static/images/apple2.png') left bottom no-repeat;
  background-size: 431px 790px;
  z-index: 10;
}

.iphone-border-bottom-bg {
  background-color: #fff;
  width: 370px;
  height: 45px;
  position: absolute;
  left: 0px;
  bottom: -30px;
}

</style>
<style>
.video-js .vjs-big-play-button{
  left: 50%;
  top:37%;
  transform:translate(-50%);
}
</style>
